<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="register"
    title="Drawer Title"
    width="50%"
  >
    <div>
      <BasicForm @register="registerForm" />
    </div>
  </BasicDrawer>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useDrawerInner } from "$/components/Drawer";

import { FormSchema, useForm } from "$/components/Form/index";
const schemas: FormSchema[] = [
  {
    field: "field1",
    component: "Input",
    label: "字段1",
    colProps: {
      span: 12,
    },
    defaultValue: "111",
  },
  {
    field: "field2",
    component: "Input",
    label: "字段2",
    colProps: {
      span: 12,
    },
  },
];
export default defineComponent({
  setup() {
    const [registerForm, { setFieldsValue }] = useForm({
      labelWidth: 120,
      schemas,
      showActionButtonGroup: false,
      actionColOptions: {
        span: 24,
      },
    });
    const [register] = useDrawerInner((data) => {
      // 方式1
      setFieldsValue({
        field2: data.data,
        field1: data.info,
      });
    });
    return { register, schemas, registerForm };
  },
});
</script>
